<template>
	<view class="cart-page">
		<u-navbar title=" " :safeAreaInsetTop="true" :fixed="false">
			<view slot="left"></view>
			<view class="" slot="center">购物车</view>
		</u-navbar>

		<view class="pro-box">
			<u-list @scrolltolower="scrolltolower" height="900rpx">
				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="u-p-20 u-flex">
							<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" :name="item.name">
							</u-checkbox>
							<u--image :src="item.imgUrl" width="80px" height="80"></u--image>
							<view class="u-flex-col u-flex-1 u-p-l-20 u-row-between" style="height:auto;">
								<u--text :text="'【' + item.name +'】'+ item.describle" size="16" lines="2" color="#333">
								</u--text>
								<view class="u-p-10">
									<u--text :text="'属性：' + item.name" size="15" lines="1" color="#666"></u--text>
								</view>


								<view class="u-flex u-flex-between">
									<u--text mode="price" text="7287.32" color="red"></u--text>
									<u-number-box v-model="item.id">
										<view slot="minus" class="minus">
											<u-icon name="minus" size="12"></u-icon>
										</view>
										<text slot="input" style="width: 50px;text-align: center;"
											class="input">{{item.id}}</text>
										<view slot="plus" class="plus">
											<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
										</view>
									</u-number-box>
								</view>
							</view>
						</view>
					</u-list-item>
					<!-- #ifdef H5 -->
					<view class="u-flex u-row-between u-p-20 u-info-light-bg"
						style="position:fixed;bottom: 100rpx;width: 100%;z-index: 99;">
						<u-checkbox shape="circle" label="全选"></u-checkbox>
						<view class="u-flex">
							<view class="u-p-r-20">
								<u--text mode="price" text="7287.32" color="red" size="20"></u--text>
							</view>
							<u-button text="立即下单" type="warning " shape="circle" size="small"></u-button>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view class="u-flex u-row-between u-p-20 u-info-light-bg"
						style="position:fixed;bottom: 0rpx;width: 100%;z-index: 99;">
						<u-checkbox shape="circle" label="全选"></u-checkbox>
						<view class="u-flex">
							<view class="u-p-r-20">
								<u--text mode="price" text="7287.32" color="red" size="20"></u--text>
							</view>
							<u-button text="立即下单" type="warning " shape="circle" size="small"></u-button>
						</view>
					</view>
					<!-- #endif -->
					
				</u-checkbox-group>
			</u-list>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				checkboxValue1: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// scrolltolower() {
			// 	this.loadmore()
			// },
			// loadmore() {
			// 	for (let i = 0; i < 30; i++) {
			// 		this.indexList.push({
			// 			url: this.urls[uni.$u.random(0, this.urls.length - 1)]
			// 		})
			// 	}
			// },
			getData() {
				uni.$u.http.post('/shoppingCar/queryShoppingCar').then(res => {
					this.indexList = res.data.data
				}).catch(err => {
					this.$refs.uToast.error(res.data.resultInfo)
				})
			},
		}
	}
</script>

<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
